<template>
	<div :class="lunbotu.length==0?'customtext':''">
	<span v-if="lunbotu.length==0?true:false">轮播图广告组件</span>
	<span v-if="lunbotu.length==0?true:false">(推荐750*280px的一组等比例图片)</span>
	<div v-if="lunbotu.length==0?false:true">
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
		  <van-swipe-item v-for="(item,index) in lunbotu" :key="index"><a :href="item.url" @click="myClick($event)">
			<img v-lazy="item.src" width="100%" height="200px"/></a></van-swipe-item>
		</van-swipe>
	</div>
	</div>
</template>

<script>
  export default {
    // 接受父组件的值
    props: ["lunbotu","prevent"],
	methods:{
		myClick(e){
			//阻止事件行为
			if(this.prevent){
			e.preventDefault();
			return;
			}
		}
	},
	created(){
		//console.log(this.lunbotu);
		//this.lunbotu=[{"src":"https://img01.yzcdn.cn/vant/leaf.jpg","url":""},{"src":"https://img01.yzcdn.cn/vant/leaf.jpg","url":""},{"src":"https://img01.yzcdn.cn/vant/leaf.jpg","url":""}]
	}
  }
</script>

<style lang="scss" scoped>
	.customtext {
		margin: 0 auto;
		background: #eee;
		width: 100%;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:10px;
		flex-direction: column;
	  span{
		  font-size: 12px;
		  flex:1;
		  line-height: 50px;
	  }
	}
	 .my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    text-align: center;
	    //line-height: 150px;
	    //background-color: #39a9ed;
	  }
</style>
